<template>
	<view class="page">
		<view class="loading_css" v-if="!isShow">
			<u-loading size="36" color="#4177DD"></u-loading>
			<view class="loading_text">加载中</view>
		</view>
		<block v-else>
			<swiper :autoplay="false" :interval="interval">
				<swiper-item class="swiperItem" v-for="(v, k) in list" :key="k">
					<image :src="v.thumb" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="count_down" v-if="!ad">
				{{time_num}}s
			</view>
			<view class="join" v-if="!ad" @tap.stop="getAPP">进入APP</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				"interval": 5000,
				"list": [],
				"time_num": 9,
				"timer": null,
				"isShow": false,
				"ad": true,
			}
		},
		onLoad() {
			let _this = this;
			_this.ad = uni.getStorageSync('ad');
			if (!_this.ad) {
				// _this.isShow = true;
				uni.getNetworkType({
					success: function (res) {
						if (res.networkType != 'none') {
							_this.getGuide();
						}
					}
				});
			} else {
				uni.switchTab({
					url: '/pages/tabBar/homePages/homePages'
				})
			}
			
			uni.onNetworkStatusChange(function (res) {
				if (res.isConnected) {
					_this.getGuide();
				}
			}, function(err) {
				console.log(err);
			});
		},
		onShow() {

		},
		onUnload() {
			uni.setStorageSync('ad', true);
			clearInterval(this.timer);
			var callback = function(res) {
			    // ...这里写你的业务逻辑
			}
			uni.offNetworkStatusChange(callback);
		},
		methods: {
			getGuide() {
				// this.list = [{
				// 		"thumb": '/static/guide/1.png'
				// 	},
				// 	{
				// 		"thumb": '/static/guide/2.png'
				// 	},
				// 	{
				// 		"thumb": '/static/guide/3.png'
				// 	}
				// ]
				// this.isShow = false;
				// this.timer = setInterval(() => {
				// 	if (this.time_num == 0) {
				// 		clearInterval(this.timer);
				// 		uni.setStorageSync('ad', true);
				// 		uni.switchTab({
				// 			url: '/pages/tabBar/homePages/homePages'
				// 		})
				// 	} else {
				// 		this.time_num = this.time_num - 1;
				// 	}
				// }, 1000)
				this.$api.post(global.apiUrls.post6436c7f97d103, {
					typeid: 2
				}).then(res => {
					// console.log(res);
					this.isShow = true;
					if (res.data.code == 1) {
						this.list = res.data.data;
						this.timer = setInterval(() => {
							if (this.time_num == 1) {
								clearInterval(this.timer);
								uni.setStorageSync('ad', true);
								uni.switchTab({
									url: '/pages/tabBar/homePages/homePages'
								})
							} else {
								this.time_num = this.time_num - 1;
							}
						}, 1000)
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			getAPP() {
				clearInterval(this.timer);
				uni.setStorageSync('ad', true);
				uni.switchTab({
					url: '/pages/tabBar/homePages/homePages'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 750rpx;
		height: 100vh;
		position: relative;
		background: #fff;

		uni-swiper {
			width: 750rpx;
			height: 100vh;
		}

		.swiperItem {
			width: 750rpx;
			height: 100vh;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.count_down {
			position: absolute;
			top: 110rpx;
			right: 48rpx;
			width: 48rpx;
			height: 48rpx;
			line-height: 46rpx;
			text-align: center;
			border-radius: 50%;
			border: 1rpx solid #3E80F6;
			font-size: 22rpx;
			color: #666;
		}

		.join {
			width: 220rpx;
			height: 52rpx;
			line-height: 52rpx;
			text-align: center;
			border-radius: 38rpx;
			background: #3E80F6;
			color: #fff;
			position: absolute;
			bottom: 60rpx;
			left: 50%;
			transform: translateX(-50%);
			font-size: 24rpx;
		}
	}
</style>
